<!--
 * @Author:首页
 * @Date: 2020-06-22 09:52:48
 * @LastEditTime: 2021-09-17 20:45:39
 * @LastEditors: wangwangwang
 * @Description: In User Settings Edit
 * @FilePath: \icps_baseWeb\src\views\index\index.vue
-->
<template>
  <div>
    <div v-for="(item, index) in flex" :key="index">
      <!--第一页布局-->
      <div v-if="index == 0">
        <div v-if="theme !== 3" class="index">
          <div :style="leftStyle" class="left">
            <homeLeft></homeLeft>
          </div>
          <div class="center"></div>
          <div :style="rightStyle" class="right">
            <homeRight :key="time" :list="flex[0].pages.list" @changemodule1="changemodule1"></homeRight>
          </div>
        </div>
        <div v-if="theme == 3" class="index">
          <div :style="rightStyle" class="right">
            <homeRight :list="flex[0].pages.list"></homeRight>
          </div>
          <div class="center"></div>
          <div :style="leftStyle" class="left">
            <homeLeft></homeLeft>
          </div>
        </div>
      </div>
      <!-- 新页面 -->
      <div v-else class="new_pages">
        <div class="new_pages_bg shadow">
          <div v-for="(pagesItem, pagesIndex) in item.pages" :key="pagesIndex" :style="col(pagesItem.height)" class="pages_col">
            <div v-for="(arrItem, arrIndex) in pagesItem.arr" :key="arrIndex" :style="line(arrItem.width)" class="pages_item">
              <div v-if="arrItem.name=='iframe'">
                <iframe class="iframe" frameborder="0" seamless :src="arrItem.url"></iframe>
              </div>
              <div v-else-if="toJSON(arrItem.data).graphicalCss=='table-basic'" style=" position: relative;">
                <div class="changemodule" @click="changemodule(index,pagesIndex,arrIndex)">
                  <i style="font-size: 20px; " class="el-icon-more"></i>
                </div>
                <Table :key="'right'+arrIndex+pagesIndex+toJSON(arrItem.data).id" :data="toJSON(arrItem.data)"></Table>
              </div>
              <div v-else style=" position: relative;">
                <div class="changemodule" @click="changemodule(index,pagesIndex,arrIndex)">
                  <i style="font-size: 20px; " class="el-icon-more"></i>
                </div>
                <Echart1 :key="'right'+arrIndex+pagesIndex+toJSON(arrItem.data).id" :data="toJSON(arrItem.data)" :name="'right'+arrIndex+pagesIndex+toJSON(arrItem.data).id"></Echart1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-dialogDrag :visible.sync="Dialog" width="300px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">更换看板</span>
      <div class="dialoginfo">
        <el-cascader v-model="changindex" size="medium" style="width: 240px;" :options="list" placeholder="请选择组件" :props="{value:'id',label:'title'}">
        </el-cascader>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="Dialog=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import homeLeft from "@/components/home_left/home_left";
import homeRight from "@/components/home_right/home_right";
import { mapGetters } from "vuex";
import { getUserInfo } from '@/utils/auth.js';
import { getInfo } from "@/api/basedata/pageConfig.js";
import Echart1 from '@/views/platform/ICPS/board/components/echart1.vue';
import Table from '@/views/platform/ICPS/board/components/table.vue';
import { source_page } from "@/api/board/datashow.js";
import { getPerMission } from '@/utils/auth.js';
import { saveOrUpdate } from '@/api/basedata/pageConfig.js';
/*全局调用*/
export default {
  components: {
    homeLeft,
    homeRight,
    Echart1,
    Table
  },
  data() {
    return {
      screenWidth: 0,
      flex: "",
      fromData: {
        page: 1,
        pageSize: 9999
      },
      echarts: [],
      Dialog: false,
      list: [],
      index1: '',
      index2: '',
      index3: '',
      changindex: [],
      time: '',
    };
  },
  computed: {
    ...mapGetters({
      theme: "gettheme",
    }),
    leftStyle() {
      return (
        "width:" + (this.screenWidth - 72) * this.flex[0].pages.leftwidth + "px"
      );
    },
    rightStyle() {
      return (
        "width:" +
        (this.screenWidth - 72) * this.flex[0].pages.rightwidth +
        "px"
      );
    },
  },
  async created() {
    let functionList = getPerMission()?.functionLimitList.filter(res => (res.code.indexOf('board_Salesofkanban') !== -1));
    await source_page(this.fromData).then(res => {
      res.data.data.forEach(res => {
        res.dataField = JSON.parse(res.dataField)
        res.colorCss = JSON.parse(res.colorCss)
      })
      this.echarts = res.data.data
    })
    await getInfo({ id: getUserInfo().userId, indexType: "type_user" }).then(
      (res) => {
        /*获取页面布局信息*/
        if (res.data) {
          this.flex = JSON.parse(JSON.parse(res.data).pageInfo);
        } else {
          this.flex = [{ pages: { leftwidth: 0.65, rightwidth: 0.35, list: [] } }];
        }
      }
    );
    functionList = functionList.map(res => {
      res.title = res.name
      res.children = this.echarts.filter(item => (res.functionId == item.functionId))
      return res
    })
    this.list = functionList
  },
  mounted() {
    this.screenWidth = this.onScreenWidth(document.documentElement.clientWidth);
    window.onresize = () => {
      return (() => {
        this.screenWidth = this.onScreenWidth(
          document.documentElement.clientWidth
        );
      })();
    };
  },
  methods: {
    changemodule1(a) {
      this.index1 = 0
      this.index2 = a
      this.changindex = []
      this.Dialog = true
    },
    changemodule(a, b, c) {
      this.index1 = a
      this.index2 = b
      this.index3 = c
      this.changindex = []
      this.Dialog = true
    },
    submit() {
      let _this = this
      let index = this.echarts.find(res => (res.id == this.changindex[1]))
      if (_this.index1 == 0) {
        _this.flex[_this.index1].pages.list[_this.index2].name = index.title
        _this.flex[_this.index1].pages.list[_this.index2].data = index
      } else {
        _this.flex[_this.index1].pages[_this.index2].arr[_this.index3].name = index.title
        _this.flex[_this.index1].pages[_this.index2].arr[_this.index3].data = JSON.stringify(index)
      }
      _this.flex[0].pages.list.forEach(res => {
        res.data = JSON.stringify(res.data)
      })
      saveOrUpdate({ pageInfo: JSON.stringify(_this.flex), roleId: getUserInfo().userId }).then((res) => {
        if (res.code == 1001) {
          _this.Dialog = false
          setTimeout(() => {
            _this.index1 = null
            _this.index2 = null
            _this.index3 = null
            _this.time = new Date().getTime()
          }, 200)
        }
      })

    },
    toJSON(data) {
      if (data) {
        let item = this.echarts.find(res => (res.id == JSON.parse(data).id))
        return item
      }
      return ''
    },
    col(height) {
      return "height:" + height;
    },
    line(width) {
      return "width:" + width;
    },
    onScreenWidth(Width) {
      if (Width < 1440) {
        return 1440;
      } else {
        return Width;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  padding: $px_24;
  display: flex;
  .left {
    height: 973px;
  }
  .center {
    width: $px_24;
  }
  .right {
    height: 973px;
  }
}
.new_pages {
  padding: 0 $px_24 $px_24 $px_24;
  .new_pages_bg {
    background: #ffffff;
    width: 100%;
    overflow: hidden;
    height: 973px;
    .pages_col {
      display: flex;
      .changemodule {
        width: 50px;
        height: 30px;
        cursor: pointer;
        position: absolute;
        line-height: 30px;
        text-align: center;
        top: 0px;
        right: 0px;
        z-index: 99;
      }
      .iframe {
        width: 100%;
        height: 100%;
      }
      .pages_item {
        padding: $px_24/2;
        > div {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
